<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv = "X-UA-Compatible" content = "chrome=1" >
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin:0;
		}
		html,body{
			width:100%;
			height:100%;
		}
		.bg {
			display: none;
		}
		#svg {
			width: 100%;
			height: 100%;
		}
		.show1 {
			stroke-dasharray:1000px;
    		stroke-dashoffset:1000px;
    		-webkit-stroke-dasharray:1000px;
    		-webkit-stroke-dashoffset:1000px;
    		-moz-stroke-dasharray:1000px;
    		-moz-stroke-dashoffset:1000px;
    		-o-stroke-dasharray:1000px;
    		-o-stroke-dashoffset:1000px;
    		-ms-stroke-dasharray:2000px;
    		-ms-stroke-dashoffset:2000px;
		}
		.show2 {
			stroke-dasharray:1000px;
    		stroke-dashoffset:1000px;
    		-webkit-stroke-dasharray:1000px;
    		-webkit-stroke-dashoffset:1000px;
    		-moz-stroke-dasharray:1000px;
    		-moz-stroke-dashoffset:1000px;
    		-o-stroke-dasharray:1000px;
    		-o-stroke-dashoffset:1000px;
    		-ms-stroke-dasharray:2000px;
    		-ms-stroke-dashoffset:2000px;
		}
		.show3 {
			stroke-dasharray:2000px;
    		stroke-dashoffset:2000px;
    		-webkit-stroke-dasharray:2000px;
    		-webkit-stroke-dashoffset:2000px;
    		-moz-stroke-dasharray:2000px;
    		-moz-stroke-dashoffset:2000px;
    		-o-stroke-dasharray:2000px;
    		-o-stroke-dashoffset:2000px;
    		-ms-stroke-dasharray:2000px;
    		-ms-stroke-dashoffset:2000px;
		}
		.show4 {
			stroke-dasharray:2000px;
    		stroke-dashoffset:2000px;
    		-webkit-stroke-dasharray:2000px;
    		-webkit-stroke-dashoffset:2000px;
    		-moz-stroke-dasharray:2000px;
    		-moz-stroke-dashoffset:2000px;
    		-o-stroke-dasharray:2000px;
    		-o-stroke-dashoffset:2000px;
    		-ms-stroke-dasharray:2000px;
    		-ms-stroke-dashoffset:2000px;
		}
		.show5 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash5 0.28s 2.92s ease forwards;
    		-o-animation: dash5 0.28s 2.92s ease forwards;
    		-webkit-animation: dash5 0.28s 2.92s ease forwards;
    		-moz-animation: dash5 0.28s 2.92s ease forwards;
    		-ms-animation: dash5 0.28s 2.92s ease forwards;
		}
		.show6 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash6 0.52s 3.64s ease forwards;
    		-moz-animation: dash6 0.52s 3.64s ease forwards;
    		-o-animation: dash6 0.52s 3.64s ease forwards;
    		-webkit-animation: dash6 0.52s 3.64s ease forwards;
    		-ms-animation: dash6 0.52s 3.64s ease forwards;
		}
		.show7 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash7 0.52s 3.64s ease forwards;
    		-webkit-animation: dash7 0.52s 3.64s ease forwards;
    		-moz-animation: dash7 0.52s 3.64s ease forwards;
    		-ms-animation: dash7 0.52s 3.64s ease forwards;
    		-o-animation: dash7 0.52s 3.64s ease forwards;
		}
		.show8 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash8 0.4s 4.12s ease forwards;
    		-webkit-animation: dash8 0.4s 4.12s ease forwards;
    		-moz-animation: dash8 0.4s 4.12s ease forwards;
    		-ms-animation: dash8 0.4s 4.12s ease forwards;
    		-o-animation: dash8 0.4s 4.12s ease forwards;
		}
		.show9 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash9 0.46s 3.64s ease forwards;
    		-webkit-animation: dash9 0.46s 3.64s ease forwards;
    		-moz-animation: dash9 0.46s 3.64s ease forwards;
    		-ms-animation: dash9 0.46s 3.64s ease forwards;
    		-o-animation: dash9 0.46s 3.64s ease forwards;
		}
		.show10 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash10 1.16s 3.44s ease forwards;
    		-webkit-animation: dash10 1.16s 3.44s ease forwards;
    		-moz-animation: dash10 1.16s 3.44s ease forwards;
    		-ms-animation: dash10 1.16s 3.44s ease forwards;
    		-o-animation: dash10 1.16s 3.44s ease forwards;
		}
		.show11 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash11 0.4s 4.64s ease forwards;
    		-webkit-animation: dash11 0.4s 4.64s ease forwards;
    		-moz-animation: dash11 0.4s 4.64s ease forwards;
    		-ms-animation: dash11 0.4s 4.64s ease forwards;
    		-o-animation: dash11 0.4s 4.64s ease forwards;
		}
		.show12 {
			stroke-dasharray:2000;
    		stroke-dashoffset:2000;
    		-webkit-stroke-dasharray:2000;
    		-webkit-stroke-dashoffset:2000;
    		-moz-stroke-dasharray:2000;
    		-moz-stroke-dashoffset:2000;
    		-o-stroke-dasharray:2000;
    		-o-stroke-dashoffset:2000;
    		-ms-stroke-dasharray:2000;
    		-ms-stroke-dashoffset:2000;
    		animation: dash12 1s 4.64s ease forwards;
    		-webkit-animation: dash12 1s 4.64s ease forwards;
    		-moz-animation: dash12 1s 4.64s ease forwards;
    		-ms-animation: dash12 1s 4.64s ease forwards;
    		-o-animation: dash12 1s 4.64s ease forwards;
		}
		path{
			opacity:0;
		}
		circle {
			opacity:0;
		}
		.imgbg {
			opacity: 0;
		}
		image {
			opacity: 0;
		}
		.icon1 {
			transform-origin: center center;
			-webkit-transform-origin: center center;
			-moz-transform-origin: center center;
			-o-transform-origin: center center;
			-ms-transform-origin: center center;

		}
		.imgz {
			opacity: 0;
		}
		.xz-change {
			opacity: 1;
		}
		.music {
			opacity: 0;
		}
		.bg {
			width:100%;
			height: 100%;
		}
		.svg-pos {
			width: 99%;
			height: 100%;
			margin: 0 auto;
		}
		.font {
			/*opacity: 1;*/
		}
	</style>
</head>
<body>
	<div class="bg">	
	<div class="svg-pos">
	<svg id="svg" viewBox="0,0,1860,856" preserveAspectRatio="xMinYMin meet">
		<desc>Created with Snap</desc>
		<defs></defs>
		<image xlink:href="img/base1.png" preserveAspectRatio="none" x="500" y="75" width="900" height="600" class="icon1 baseImg"></image>
		<g class="iconwrap">
			<image xlink:href="img/1.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon11 d-3"></image>
			<image xlink:href="img/2.png" preserveAspectRatio="none" x="890" y="330" width="0" height="0" class="icon1 icon12 d-1" style="opacity: 0;"></image>
			<image xlink:href="img/3.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon13 d-3"></image>
			<image xlink:href="img/4.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon14 d-5" style="opacity: 0;"></image>
			<image xlink:href="img/5.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon15 d-5"  style="opacity: 0;"></image>
			<image xlink:href="img/6.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon16 d-3"  style="opacity: 0;"></image>
			<image xlink:href="img/7.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon17 d-1"  style="opacity: 0;"></image>
			<image xlink:href="img/8.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon18 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/9.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon19 d-4" style="opacity: 0;"></image>
			<image xlink:href="img/10.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon20 d-2" style="opacity: 0;"></image>
			<image xlink:href="img/11.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon21 d-2"  style="opacity: 0;"></image>
			<image xlink:href="img/12.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon22 d-2"  style="opacity: 0;"></image>
			<image xlink:href="img/13.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon23 d-4"  style="opacity: 0;"></image>
			<image xlink:href="img/14.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon24 d-1" style="opacity: 0;"></image>
			<image xlink:href="img/15.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon25 d-3" style="opacity: 0;"></image>
			<image xlink:href="img/16.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon26 " style="opacity: 0;"></image>
			<image xlink:href="img/17.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon27 d-2"  style="opacity: 0;"></image>
			<image xlink:href="img/18.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0" class="icon1 icon28 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/16.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"  class="icon1 icon29 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/3.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"  class="icon1 icon30 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/3.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"   class="icon1 icon31 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/3.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"  class="icon1 icon32 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/3.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"  class="icon1 icon36 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/20.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"  class="icon1 icon33 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/20.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"  class="icon1 icon34 d-6" style="opacity: 0;"></image>
			<image xlink:href="img/20.png" preserveAspectRatio="none" x="870" y="330" width="0" height="0"  class="icon1 icon35 d-6" style="opacity: 0;"></image>
		</g>
		<g class="xz-change">
			<image xlink:href="img/x.png" preserveAspectRatio="none" x="800" y="203" width="300" height="272" style="opacity: 1;" class="imgx"></image>
			<image xlink:href="img/z.png" preserveAspectRatio="none" x="790" y="203" width="300" height="272" class="imgz"></image>
		</g>
		<path d="M443 260Q396 324,400 350Q396 408,417 430L443 468" stroke="#010101" fill="none" style="stroke-width: 4;" class="path1"></path>
		<path d="M1415 260Q1466 324,1463 350Q1465 408,1443 430L1416 468" stroke="#010101" fill="none" style="stroke-width: 4;" class="path1"></path>
		<path d="M843 77L620 77" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show4"></path>
		<path d="M1018 77L1239 77" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show4"></path>
		<path d="M660 116Q639 112,629 130L500 300Q461 346,500 384L624 560Q632 578,670 574L1200 574Q1232 579,1243 550L1363 382" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show3"></path>
		<path d="M660 116L715 116Q738 116,749 130Q765 153,800 149L1080 149Q1090 153,1116 125Q1125 115,1144 116L1200 116Q1226 113,1235 136L1360 300Q1398 341,1360 386" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show3"></path>
		<circle cx="902" cy="120" fill="#010101" class="circle1"></circle>
		<path d="M900 120Q900 134,870 133L780 133" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show1"></path>
		<circle cx="961" cy="120" fill="#010101" class="circle1"></circle>
		<path d="M963 120Q963 132,980 133L990 133L1080 133" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show1"></path>
		<path d="M442 262L548 120Q569 84,620 91L930 91" stroke="#010101" fill="none" style="stroke-width: 4; opacity: 1;" class="show2"></path>
		<path d="M443 468L551 610Q570 643,600 639L680 639Q703 643,710 620Q728 597,770 604L930 604 " stroke="#010101" fill="none" style="stroke-width: 4; opacity: 1;" class="show2"></path>
		<path d="M1416 468L1304 615Q1288 644,1260 638L1180 638Q1158 643,1150 620Q1138 602,1120 604L930 604" stroke="#010101" fill="none" style="stroke-width: 4; opacity: 1;" class="show2"></path>
		<path d="M1415 260L1312 120Q1292 87,1260 90L930 91" stroke="#010101" fill="none" style="stroke-width: 4; opacity: 1;" class="show2"></path>
		<path d="M866 178L740 178Q724 176,719 168Q713 148,686 152L646 152" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show5"></path>
		<path d="M995 178L1110 178Q1137 180,1143 164Q1152 149,1170 152L1212 152" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show5"></path>
		<circle cx="648" cy="188"  fill="#010101" class="circle2"></circle>
		<path d="M648 188L565 304L564 340L544 378L640 520" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show9"></path>
		<circle cx="1212" cy="188"  fill="#010101" class="circle2"></circle>
		<path d="M1214 188L1295 304L1296 340L1318 378L1220 520" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show9"></path><circle cx="447" cy="388"  fill="#010101" class="circle3"></circle>
		<path d="M450 388L464 418Q467 420,464 430Q460 436,471 450L546 558" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show8"></path>
		<circle cx="1413" cy="388"  fill="#010101" class="circle3"></circle>
		<path d="M1410 388L1396 418Q1394 420,1396 430Q1402 432,1392 448L1315 558" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show8"></path>
		<circle cx="842" cy="512" fill="#010101" class="circle4"></circle>
		<path d="M652 555Q670 522,710 527L810 526Q842 526,838 518" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show7"></path>
		<circle cx="1017" cy="512" fill="#010101" class="circle4"></circle>
		<path d="M1207 554Q1190 526,1155 526L1050 526Q1026 530,1019 518" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show7"></path>
		<circle cx="670" cy="608" fill="#010101" class="circle5"></circle>
		<path d="M670 610L623 610L608 580Q609 578,600 577Q587 582,577 560L497 446" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show6"></path>
		<circle cx="1190" cy="608" r="9" fill="#010101" class="circle5"></circle>
		<path d="M1193 610L1235 610L1252 580Q1254 576,1259 578Q1271 580,1284 560L1365 444" stroke="#010101" fill="none" style="stroke-width: 2; opacity: 1;" class="show6"></path>
		<path d="M237 0L77 230Q64 252,65 280L65 324Q65 365,82 381L280 660Q290 684,350 678L654 678" stroke="#3693fb" fill="none" style="stroke-width: 2; opacity: 1;" class="show10"></path>
		<!-- <line x1="930" y1="0" x2="930" y2="800" stroke="#3693fb"></line>
		<line x1="200" y1="345" x2="1700" y2="345" stroke="#3693fb"></line> -->
		<circle cx="660" cy="679" fill="#3693fb" class="circle6"></circle>
		<path d="M661 680L661 742L586 742" stroke="#3693fb" fill="none" style="stroke-width: 2; opacity: 1;" class="show11"></path>
		<path d="M650 690L635 730L630 708L620 725L610 703L603 730L593 715L581 730L576 719L561 742" stroke="#3693fb" fill="none" style="stroke-width: 2; opacity: 1;" class="show12"></path>
		<path d="M1625 0L1778 220Q1795 244,1797 270L1797 320Q1801 360,1768 400L1590 646Q1570 684,1530 675L1200 675" stroke="#3693fb" fill="none" style="stroke-width: 2; opacity: 1;" class="show10"></path>
		<circle cx="1205" cy="677" fill="#3693fb" class="circle6"></circle>
		<g class="music">
			<line x1="380" y1="390" x2="380" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line1"></line>
			<line x1="368" y1="390" x2="368" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line2"></line>
			<line x1="356" y1="390" x2="356" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line3"></line>
			<line x1="344" y1="390" x2="344" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line4"></line>
			<line x1="332" y1="390" x2="332" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line5"></line>
			<line x1="320" y1="390" x2="320" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line6"></line>
			<line x1="308" y1="390" x2="308" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line7"></line>
			<line x1="296" y1="390" x2="296" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line8"></line>
			<line x1="284" y1="390" x2="284" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line9"></line>
			<line x1="272" y1="390" x2="272" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line10"></line>
			<line x1="260" y1="390" x2="260" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line11"></line>
			<line x1="260" y1="390" x2="260" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line12"></line>
			<line x1="1480" y1="390" x2="1480" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line1"></line>
			<line x1="1492" y1="390" x2="1492" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line2"></line>
			<line x1="1504" y1="390" x2="1504" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line3"></line>
			<line x1="1516" y1="390" x2="1516" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line4"></line>
			<line x1="1528" y1="390" x2="1528" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line5"></line>
			<line x1="1540" y1="390" x2="1540" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line6"></line>
			<line x1="1552" y1="390" x2="1552" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line7"></line>
			<line x1="1564" y1="390" x2="1564" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line8"></line>
			<line x1="1576" y1="390" x2="1576" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line9"></line>
			<line x1="1588" y1="390" x2="1588" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line10"></line>
			<line x1="1600" y1="390" x2="1600" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line11"></line>
			<line x1="1612" y1="390" x2="1612" y2="380" stroke="#090101" fill="none" style="stroke-width: 10;" class="line12"></line>
		</g>
		<g x="720" y="700" class="font-wrap">
			<image xlink:href="img/font.png" x="720" y="700" preserveAspectRatio="none"  width="429" height="137" class="font"></image>
		</g>
		</svg>
	</div>
	</div>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/velocity.min.js"></script>
		<script>
		
		window.onload = function() {
			$("html").height($(window).width() / (1860 / 856))
			$(".bg").show();
			$('.imgx').velocity({translateX:"-140px"},{duration:300}).velocity(
				{translateX:"35px"},{duration:300}
			);
			$('.imgz').velocity({translateX:"140px",opacity:1},{duration:300}).velocity(
				{translateX:"-35px"},{duration:300,complete: function() {
					$('.xz-change').velocity(
						{translateX:840,translateY:310,scale:0.1},
						{duration:300,complete: function() {
							$('.imgx').velocity({translateX:"-40px"},200)
							$(".imgz").velocity({translateX:"40px"},200)
							$('.icon11').velocity({opacity:1,x:1090,y:120,width:36,height:42},900,function(){
									$('.icon11').velocity({opacity:0,x:1100,y:80},198)
								})
							$('.icon13').velocity({opacity:1,x:690,y:120,width:51,height:56},900,function(){
									$('.icon13').velocity({opacity:0,x:680,y:110},198)
								})
							$('.icon14').velocity({opacity:1,x:1200,y:480,width:42,height:50},900,function(){	
									$('.icon14').velocity({opacity:0,x:1210,y:500},330)
								})
							$('.icon15').velocity({opacity:1,x:650,y:480,width:50,height:43},900,function(){
									$('.icon15').velocity({opacity:0,x:630,y:500},198)
								})
							$('.icon16').velocity({opacity:1,x:740,y:330,width:50,height:51},900,function(){
									$('.icon16').velocity({opacity:0,x:670,y:310},66)
								})
							$('.icon17').velocity({opacity:1,x:1160,y:180,width:54,height:55},900,function(){
									$('.icon17').velocity({opacity:0,x:1170,y:170},264)
								})
							$('.icon18').velocity({opacity:1,x:740,y:580,width:70,height:51},900,function(){
									$('.icon18').velocity({opacity:0,x:730,y:590},198)
								})
							$('.icon19').velocity({opacity:1,x:820,y:70,width:51,height:50},900,function(){
									$('.icon19').velocity({opacity:0,x:820,y:60},198)
								})
							$('.icon20').velocity({opacity:1,x:1100,y:520,width:51,height:47},900,function(){
									$('.icon20').velocity({opacity:0,x:1110,y:540},198)
								})
							$('.icon21').velocity({opacity:1,x:1190,y:60,width:32,height:46},900,function(){
									$('.icon21').velocity({opacity:0,x:1200,y:40},330)
								})
							$('.icon22').velocity({opacity:1,x:940,y:130,width:55,height:45},900,function(){
									$('.icon22').velocity({opacity:0,x:950,y:100},132)
								})
							$('.icon24').velocity({opacity:1,x:1140,y:400,width:51,height:51},900,function(){
									$('.icon24').velocity({opacity:0,x:1180,y:420},198)
								})
							$('.icon25').velocity({opacity:1,x:830,y:530,width:50,height:40},900,function(){
									$('.icon25').velocity({opacity:0,x:820,y:540},132)
								})
							$('.icon26').velocity({opacity:1,x:990,y:290,width:294,height:116},900,function(){
									$('.icon26').velocity({opacity:0,y:270},132)
								})
							$('.icon27').velocity({opacity:1,x:960,y:540,width:48,height:46},900,function(){
									$('.icon27').velocity({opacity:0,x:970,y:560},198)
								})
							$('.icon28').velocity({opacity:1,x:630,y:360,width:36,height:46},900,function(){
									$('.icon28').velocity({opacity:0,x:600,y:340},300)
								})
							$('.icon29').velocity({opacity:1,x:1060,y:240,width:180,height:100},900,function(){
									$('.icon29').velocity({opacity:0,x:1080,y:220},264)
								})
							$('.icon30').velocity({opacity:1,x:1260,y:340,width:36,height:36},900,function(){
									$('.icon30').velocity({opacity:0,x:1280,y:300},198)
								})
							$('.icon31').velocity({opacity:1,x:1300,y:420,width:25,height:25},900,function(){
									$('.icon31').velocity({opacity:0,x:1320,y:360},330)
								})
							$('.icon32').velocity({opacity:1,x:600,y:190,width:24,height:30},900,function(){
									$('.icon32').velocity({opacity:0,x:580,y:170},264)
								})
							$('.icon33').velocity({opacity:1,x:680,y:280,width:180,height:100},900,function(){
									$('.icon33').velocity({opacity:0,x:650,y:270},198)
								})
							$('.icon34').velocity({opacity:1,x:650,y:180,width:130,height:60},900,function(){
									$('.icon34').velocity({opacity:0,x:620,y:160},264)
								})
							$('.icon35').velocity({opacity:1,x:640,y:160,width:80,height:40},900,function(){
									$('.icon35').velocity({opacity:0,x:610,y:140},280)
								})
							$('.icon36').velocity({opacity:1,x:620,y:250,width:40,height:40},900,function(){
									$('.icon36').velocity({opacity:0,x:600,y:240},210)
								})
							$('.xz-change').velocity({scale:1,translateX:-18,translateY:6},1000,'easeInOutExpo',function() {
								$(".baseImg").velocity({opacity: 1},200,function() {
									$(".path1").velocity({opacity:1},10)
									$(".circle1").velocity({opacity: 1,r:8},200)
									$(".circle2").velocity({opacity: 1,r:8},{duration:200,delay:1600})
									$(".circle3").velocity({opacity: 1,r:8},{duration:200,delay:2000})
									$(".circle4").velocity({opacity: 1,r:8},{duration:200,delay:2000})
									$(".circle5").velocity({opacity: 1,r:8},{duration:200,delay:1800})
									$(".circle6").velocity({opacity: 1,r:7},{duration:200,delay:1800})

								})
							})
						}}
					)
				}}
			)
			$('.show1').velocity({strokeDashoffset:0},{duration:1000,delay:2120})
			$('.show2').velocity({strokeDashoffset:0},{duration:1200,delay:2160})
			$('.show3').velocity({strokeDashoffset:0},{duration:2540,delay:2120})
			$('.show4').velocity({strokeDashoffset:0},{duration:980,delay:2320})
			$('.show5').velocity({strokeDashoffset:0},{duration:980,delay:2920})
			$('.show6').velocity({strokeDashoffset:0},{duration:1220,delay:3640})
			$('.show7').velocity({strokeDashoffset:0},{duration:1220,delay:3640})
			$('.show8').velocity({strokeDashoffset:0},{duration:1100,delay:4120})
			$('.show9').velocity({strokeDashoffset:0},{duration:1160,delay:3640,complete:function() {
				$('.font').velocity({opacity:1,y:660},{duration: 1000})
				// $('.font').animate({opacity:1},800)
			}})
			$('.show10').velocity({strokeDashoffset:0},{duration:1860,delay:3440})
			$('.show11').velocity({strokeDashoffset:0},{duration:1100,delay:4640})
			$('.show12').velocity({strokeDashoffset:0},{duration:1700,delay:4640})
			
			$(".music").velocity({opacity:1},{duration:10,delay:2400,complete:function() {
				$(".line1").velocity({y2:360},{duration:200,loop:true})
				$(".line2").velocity({y2:360},{duration:300,loop:true})
				$(".line3").velocity({y2:360},{duration:150,loop:true})
				$(".line4").velocity({y2:360},{duration:200,loop:true})
				$(".line5").velocity({y2:360},{duration:180,loop:true})
				$(".line6").velocity({y2:360},{duration:140,loop:true})
				$(".line7").velocity({y2:360},{duration:100,loop:true})
				$(".line8").velocity({y2:360},{duration:160,loop:true})
				$(".line9").velocity({y2:360},{duration:250,loop:true})
				$(".line10").velocity({y2:360},{duration:170,loop:true})
				$(".line11").velocity({y2:360},{duration:120,loop:true})
				$(".line12").velocity({y2:360},{duration:190,loop:true})
			}})
		}	
		</script>

</body>
</html>